<template>
  <el-dialog
    v-model="visible"
    :width="width"
    :title="props.title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="close"
    class="nd-dialog-box"
    :draggable="props.draggable"
  >
    <div>
      <el-form :model="form" :rules="rules" label-width="auto" ref="ruleFormRef">
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="form.goodsName" />
        </el-form-item>
        <el-form-item label="商品编号" prop="goodsNo">
          <el-input v-model="form.goodsNo" />
        </el-form-item>
        <el-form-item label="商品标题" prop="goodsTitle">
          <el-input v-model="form.goodsTitle" />
        </el-form-item>
        <el-card
          class="specification-card"
          shadow="never"
          v-for="(item, index) in form.goodsSpecificationList"
          :key="index"
        >
          <template #header>
            <div class="form-card-header">
              <span>商品规格{{ index + 1 }}</span>
              <div>
                <el-button type="primary" plain @click="handleAddSpec()" v-if="index == 0">
                  添加规格
                </el-button>
                <el-button type="danger" plain @click="handleDelSpec(index)" v-else>
                  删除规格
                </el-button>
              </div>
            </div>
          </template>
          <el-form-item label="规格名称">
            <el-input v-model="item.optionName" />
          </el-form-item>
          <el-form-item label="规格编码">
            <el-input v-model="item.goodsBarcode" />
          </el-form-item>
          <el-form-item label="标价">
            <el-input-number v-model="item.tagPrice" />
          </el-form-item>
          <el-form-item label="促销价">
            <el-input-number v-model="item.promotionalPrice" />
          </el-form-item>
          <el-form-item label="库存">
            <el-input-number v-model="item.stockNum" />
          </el-form-item>
        </el-card>
        <el-form-item label="店铺" prop="storeId">
          <el-select v-model="form.storeId" placeholder="请选择店铺">
            <el-option
              v-for="item in storeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品分类" prop="categoryId">
          <el-select v-model="form.categoryId" placeholder="请选择分类">
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="促销价格" prop="promotionalPrice">
          <el-input-number v-model="form.promotionalPrice" :min="1" :max="999999" />
          <!-- <el-input v-model="form.promotionalPrice" /> -->
        </el-form-item>
        <el-form-item label="商品标价" prop="tagPrice">
          <el-input-number v-model="form.tagPrice" :min="1" :max="999999" />
        </el-form-item>
        <el-form-item label="商品描述" prop="goodsDescription">
          <el-input
            v-model="form.goodsDescription"
            :autosize="{ minRows: 2, maxRows: 8 }"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="商品详情" prop="goodsDetails">
          <el-input
            v-model="form.goodsDetails"
            :autosize="{ minRows: 2, maxRows: 8 }"
            type="textarea"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit()">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import Vue, { reactive, ref, onMounted } from "vue";
//import PhotoModal from "@/views/photoModal";
import type { FormInstance, FormRules } from "element-plus";
import CategoryAPI from "@/api/system/category.api";

import StoreAPI from "@/api/system/store.api";
import { on } from "events";
import { emit } from "process";
// 组件接收参数
const props = defineProps({
  // 请求API的参数
  title: { type: String, default: "" },
  actionType: { type: String, default: "" },
  showFooter: {
    type: Boolean,
    default: true,
  },
  // 弹窗宽度
  width: {
    type: String,
    default: "650px",
  },
  // 弹窗高度
  height: {
    type: String,
    default: "500px",
  },
  // 是否可以拖拽
  draggable: {
    type: Boolean,
    default: true,
  },
});

interface SpecificationItem {
  optionName: string;
  headerImgPath: string;
  goodsBarcode: string;
  tagPrice: number;
  promotionalPrice: number;
  stockNum: number;
}
interface RuleForm {
  goodsName: string;
  goodsNo: string;
  goodsTitle: string;
  goodsDescription: string;
  goodsDetails: string;
  promotionalPrice: number;
  tagPrice: number;
  goodsSpecificationList: SpecificationItem[];
  categoryId: string;
  storeId: string;
}
const emit = defineEmits(["success"]);

const storeOptions = ref<OptionType[]>();
const categoryOptions = ref<OptionType[]>();

const ruleFormRef = ref<FormInstance>();
const visible = ref(false);
const form = reactive({
  goodsName: "",
  goodsNo: "",
  goodsTitle: "",
  goodsDescription: "",
  goodsDetails: "",
  promotionalPrice: 0,
  tagPrice: 0,
  goodsSpecificationList: [
    {
      optionName: "",
      headerImgPath: "",
      goodsBarcode: "",
      tagPrice: 0,
      promotionalPrice: 0,
      stockNum: 0,
    },
  ],
  categoryId: "",
  storeId: "",
});
const rules = reactive<FormRules<RuleForm>>({
  goodsName: [{ required: true, message: "输入商品名称", trigger: "blur" }],
});

function handleAddSpec() {
  form.goodsSpecificationList.push({
    optionName: "",
    headerImgPath: "",
    goodsBarcode: "",
    tagPrice: 0,
    promotionalPrice: 0,
    stockNum: 0,
  });
}

function handleDelSpec(index: number) {
  form.goodsSpecificationList.splice(index, 1);
}
function getList() {
  StoreAPI.getList({
    page: 1,
    pageSize: 999,
  }).then((data) => {
    console.log(data);
    storeOptions.value = data.map((item) => ({
      label: item.storeName,
      value: item.id,
    }));
  });
  CategoryAPI.getList({
    page: 1,
    pageSize: 999,
  }).then((data) => {
    console.log(data);
    categoryOptions.value = data.map((item) => ({
      label: item.categoryName,
      value: item.id,
    }));
  });
}

const open = () => {
  visible.value = true;
};

// 关闭
const close = () => {
  visible.value = false;
};

function view(data: any) {
  handleReset();
  visible.value = true;
  if (data) {
    initData(data);
  }
}

function initData(data: any) {
  console.log(data);
}

function handleClose() {
  visible.value = false;
  handleReset();
}

function handleSubmit() {
  (ruleFormRef.value as FormInstance).validate((valid) => {
    if (valid) {
      console.log(form);
      emit("success", form);
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}
function handleReset() {
  (ruleFormRef.value as FormInstance).resetFields();
}

onMounted(() => {
  getList();
});

defineExpose({
  open,
  close,
});
</script>

<style>
.form-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.specification-card {
  margin-bottom: 20px;
}
</style>
